<template>
  <div class="cart">
    <Navbar></Navbar>
    <Topper></Topper>
    <hr/>
    <p><Breadcrumb></Breadcrumb></p>
    <div class="cart_content">
      <div class="cart_main">
        <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="cartImage" label="商品图片" width="210">
            <template slot-scope="scope">
            <el-image 
              :src="scope.row.cartImage"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="cartName" label="商品名称" width="300"> </el-table-column>
          <el-table-column prop="cartNumber" label="购买数量">
            <template slot-scope="scope">
            <el-button icon="el-icon-minus" type="warning" plain @click="scope.row.cartNumber--"></el-button>&nbsp;&nbsp;{{ scope.row.cartNumber }}
            <el-button icon="el-icon-plus" type="warning" plain @click="scope.row.cartNumber++"></el-button>
          </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
            <el-button type="danger" @click="cancelBuy(scope.row)">取消购买</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <div class="left">共两件商品</div>
        <!-- <div class="aa">立即下单，享超级优惠！</div> -->
        <div class="right">
          合计：￥{{total}}
          <el-button type="danger" class="buttonGo" @click="aaa">去结算</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import Topper from "@/components/Topper.vue";
import List from "@/components/List.vue";
import Footer from "@/components/Footer";
import Flower from "@/components/Flower";
import Breadcrumb from '@/components/Breadcrumb.vue';
import {getCartList,deleteCart} from '@/api/Cart'



export default {
  components: {
    Navbar,
    Topper,
    List,
    Footer,
    Flower,
    Breadcrumb
  },
  data() {
    return {
      count:0,
      userId:1,
      total:0,
      cartNumber:0,
      tableData: [
        
      ],
      cartForm:{

      }
    };
  },
  methods:{
    aaa(){
      window.open("http://127.0.0.1:9600/server/alipay/pay?subject="+'蓝色梦想'+"&traceNo="+Math.floor(Math.random() * 900000) + 100000+"&totalAmount="+219,'_self')

    },

    cancelBuy(row){
      console.log(row);
      let cartParams = {
        userId:row.userId,
        cartId:row.cartId,
        
      }
      console.log(cartParams);
      this.$confirm('是否取消购买, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          deleteCart(cartParams).then(res=>{
            
            this.init()
          })
          this.$message({
            type: 'success',
            message: '已取消!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已撤回'
          });          
        });
        
      
    },
    sub(cartNumber){
      
      if(cartNumber>0){
        this.cartNumber = cartNumber--;
      }
      
      console.log(cartNumber);
    },
    ins(cartNumber){
      if(cartNumber>0){
        cartNumber--;
      }
      console.log(cartNumber);
    },
    init(){
      getCartList(this.userId).then(res=>{
        
        this.tableData = res.data
      })
    },
    handleSelectionChange(value){
     
      this.count++;
      console.log(this.count);
      console.log(value);
      if(this.count%2!=0){
        value.forEach(element => {
        if(element)
        
        this.total+=element.cartPrice*element.cartNumber
      });
      }else{
        this.total = 0;
      }
      
      
    }
  },
  
  computed:{
    totalPrice:function(){
      var total = 0;
      
      return total;
    }
    
  },
  mounted(){
    this.init()
  }
};
</script>

<style lang="scss">
.cart {
  hr {
      border: none; /* 移除默认的边框 */
      height: 2px; /* 设置水平线的高度 */
      background-color: #884e22; /* 设置水平线的颜色 */
      margin: 20px 0; /* 设置上下外边距 */
    }
  background-color: #ffffff;

  .cart_content {
    background-color: #ffffff;
    margin: auto;
    width: 70%;
    .footer {
      line-height: 100px;
      height: 100px;
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      .left {
        margin-left: 20px;
      }
      .right {
        margin-right: 20px;
        color: #ff0000;
        .buttonGo {
          margin-left: 10px;
        }
      }
    }
    .el-checkbox__inner {
      width: 20px;
      height: 20px;
    }
    .el-checkbox__inner::after {
      border: 3px solid #fff;
      border-left: 0;
      border-top: 0;
      left: 6px;
      top: 3px;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: #e6a23c;
      border: 1px solid #e6a23c;
    }
    .el-table .cell{
        font-size: 20px;
        text-align: center;
    }
    .cart_main{
        
    }
  }
}
</style>